<script setup>
import { ref, computed, onMounted, defineProps, nextTick } from "vue";
import { settletotal } from "@/services/reward";
import { earnCount, skip } from "@/services/user";
import {
  onShow,
  onPullDownRefresh,
  onReachBottom,
  onLoad,
  onReady,
} from "@dcloudio/uni-app";
import { formatPrice } from "@/utils/formatPrice";

const changeList = ref([]);
const status = ref("more");
const pages = ref({
  page: 1,
  limit: 20,
});
const isdatelist = ref(true);
onShow(() => {
  // earnCountfun();
});

// 统计
const selecttype = ref(1);
const taoll = ref(null);
const linkobj = ref(null);
const datalistindex = ref([]);

const jsbfbfun = (toall, num) => {
  let nums = Math.round((num / toall) * 100);
  return nums;
};

const selecttopfun = (type) => {
  selecttype.value = type;
  settletotalfun(type);
};

const settletotalfun = async (type) => {
  let res = await settletotal({ type: type, date: date.value });
  taoll.value = res.data.sum;
  let list = [];
  list = res.data.list;
  list.forEach((item, index) => {
    // item.labelText = item.name + item.percent;
    item.labelText = item.percent;
  });
  datalistindex.value = list;
  let res2 = {
    series: [
      {
        data: res.data.list,
      },
    ],
  };
  // return

  // nextTick(()=>{
  chartData.value = JSON.parse(JSON.stringify(res2));
  // })
};

// echart
onReady(() => {
  getServerData();
});
const chartData = ref({});
const getServerData = () => {
  // //模拟从服务器获取数据时的延时
  // setTimeout(() => {
  //     //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
  //     let res = {
  //         series: [
  //           {
  //             data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18,"labelText":"四班:18人"},{"name":"五班","value":8}],
  //           }
  //         ]
  //       };
  //     chartData.value = JSON.parse(JSON.stringify(res));
  //   }, 500);
};
const opts = ref({
  rotate: false,
  rotateLock: false,
  color: [
    "#F56DA2",
    "#F892B9",
    "#FAB6D1",
    "#F3498B",
    "#5ACAC6",
    "#73D2CF",
    "#8DDAD8",
    "#9A60B4",
    "#ea7ccc",
  ],
  padding: [60, 10, 60, 10],
  dataLabel: true,
  enableScroll: false,
  legend: {
    show: true,
    position: "right",
    lineHeight: 25,
    orient: "vertical", // 设置为垂直方向
  },
  title: {
    name: "",
    fontSize: 15,
    color: "#666666",
  },
  subtitle: {
    name: "",
    fontSize: 25,
    color: "#7cb5ec",
  },
  extra: {
    ring: {
      ringWidth: 20,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: true,
      borderWidth: 0,
      borderColor: "#FFFFFF",
    },
  },
});

//下拉触底
onReachBottom(() => {
  // 触发下拉触底时执行的操作
  getChangeList(date.value);
});

// 减少的金额
const reduce = ref(0);
// 增加的金额
const add = ref(0);

const type = ref(0);
onLoad((e) => {
  //   settletypefun(selectonetop.value);
  settletotalfun(selecttype.value);
});
const numobj = ref({});

const settletypefun = async (index, type) => {
  let res = await settletype({ type: index });
  list2.value = res.data.type_class;
  selecttwotopname.value = list2.value[selecttwotop.value].value;
  getChangeList(date.value);
};

// 获取余额变更记录
const getChangeList = async (date = "") => {
  if (!isdatelist.value) return;
  let res = null;
  let dates = {
    date,
    type: selectonetop.value,
    type_class: selecttwotopname.value,
    ...pages.value,
  };
  status.value = "loading";
  res = await mySettle(dates);
  let arr = [];
  arr = res.data.list;

  changeList.value = changeList.value.concat(arr);
  numobj.value = res.data.sum;
  if (res.data.list.length < pages.value.limit) {
    isdatelist.value = false;
    status.value = "no-more";
  } else {
    isdatelist.value = true;
    status.value = "more";
  }
  pages.value.page++;
};

// 方法
function bindDateChange(e) {
  isdatelist.value = true;
  pages.value.page = 1;
  changeList.value = [];
  date.value = e.detail.value;
  settletotalfun(selecttype.value);
  //   getChangeList(date.value);
}

// 跳转余额变动
const gotoBalance = (id) => {
  uni.navigateTo({
    url: `/pages/servicereward/myreward/awaitClose?id=${id}`,
  });
};
const date = ref(null);
// 日期选择器
const currentDate = getDate({
  format: true,
});

date.value = getDate({
  format: true,
});

const startDate = ref(null);
const endDate = ref(null);

startDate.value = getDate("start");
endDate.value = getDate({
  format: true,
});

function getDate(type) {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  // let day = date.getDate();

  if (type === "start") {
    year = year - 60;
  } else if (type === "end") {
    year = year;
  }
  month = month > 9 ? month : "0" + month;
  // day = day > 9 ? day : '0' + day;
  return `${year}-${month}`;
}

const DateSwitching = (Data, formString, type) => {
  let newdate = "";
  if (type == 1) {
    newdate = Data.split(formString);

    return newdate[0] + "年";
  }
  if (type == 2) {
    newdate = Data.split(formString);

    return newdate[0] + "年" + newdate[1] + "月";
  }
  if (type == 3) {
    newdate = Data.split(formString);

    return newdate[0] + "年" + newdate[1] + "月" + newdate[2] + "日";
  }
};
</script>
<template>
  <view class="changeRecord">
    <view class="change-top">
      <picker
        mode="date"
        :value="date"
        :start="startDate"
        fields="month"
        :end="endDate"
        @change="bindDateChange"
      >
        <view class="uni-input">
          <text>{{ DateSwitching(date, "-", 2) }}</text>
          <image
            src="@/pages/servicereward/static/reward/ls-dowe.png"
            mode="scaleToFill"
        /></view>
      </picker>
      <view class="select-index">
        <view
          :class="selecttype == 1 ? 'select-item' : ''"
          @click="selecttopfun(1)"
        >
          收入
        </view>
        <view
          :class="selecttype == -1 ? 'select-item' : ''"
          @click="selecttopfun(-1)"
        >
          支出
        </view>
      </view>
    </view>

    <view class="my-money">
      <view class="my-money-title">
        <view class="my-money-titlename"
          >我的{{ selecttype == -1 ? "支出" : "收入" }}
        </view>
        <!-- <view class="my-money-k" @click="goIncomeStatistics">
          <text>查看</text>
          <image
            src="@/pages/servicereward/static/reward/ls-dowe.png"
            mode="widthFix"
          />
        </view> -->
      </view>
      <view class="my-money-num">
        <!-- <view class="my-money-numitem" @click="gocommonbalancefun(1)">
          <view class="my-money-numitem-num">
            <up-count-to
              :startVal="0"
              :endVal="taoll && taoll.month_earn ? taoll.month_earn : 0"
              separator=","
              :decimals="2"
              :useEasing="true"
              :duration="500"
              fontSize="24"
              color="#D49E3B"
              :bold="true"
            ></up-count-to>
          </view>
          <view class="my-money-numitem-name">
            <text>本月实际收入(元)</text>
          </view>
        </view> -->

        <view class="my-money-numitem" @click="gocommonbalancefun(3)">
          <view class="my-money-numitem-num">
            ¥
            <up-count-to
              :startVal="0"
              :endVal="taoll ? taoll : 0"
              separator=","
              :decimals="2"
              :useEasing="true"
              :duration="500"
              fontSize="24"
              color="#F3498B"
              :bold="true"
            ></up-count-to
          ></view>
          <!-- <view class="my-money-numitem-name">
            <text>累计收入(分)</text>
          </view> -->
        </view>
      </view>
    </view>

    <!-- <view class="echart-k">
      <view class="echart-k-title"
        >{{ selecttype == -1 ? "支出" : "收入" }}构成</view
      >
      <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" /> 
    </view> -->

    <view class="jindu-content">
      <view class="echart-k-title"
        >{{ selecttype == -1 ? "支出" : "收入" }}构成</view
      >
      <!-- <view class="jindu-index">
            <view class="jindu-index-title">
                <view class="jindu-index-title-echart">
                    <image
                src="@/pages/servicereward/static/reward/one.png"
                mode="scaleToFill"
            />
                    <text>居间服务费</text> 
                </view>

               
               <view class="jindu-pages">
                <up-line-progress activeColor="#D49E3B"  :percentage="taoll?100:0" :showText="false"></up-line-progress>
            </view>
            </view>
           
            <view class="jindu-index-num"><text>￥{{ taoll }}</text></view>
        </view> -->
      <view
        class="jindu-index"
        v-for="(item, index) in datalistindex"
        :key="index"
      >
        <view class="jindu-index-title">
          <view class="jindu-index-title-echart">
            <image
              src="@/pages/servicereward/static/reward/form.png"
              mode="scaleToFill"
            />
          </view>
          <view class="text-name-num" style="width: 100%;">
            <view class="text-name">
              <text class="text-name-title">
                {{ item.name }}
                <text class="text-name-percent">{{ item.percent }}</text>
              </text>
              <text class="text-name-num">￥{{ formatPrice(item.value) }}</text>
            </view>
            <view class="jindu-pages"
              ><up-line-progress
                activeColor="#F3498B"
                :percentage="item.value > 0 ? jsbfbfun(taoll, item.value) : 0"
                :showText="false"
              ></up-line-progress
            ></view>
          </view>
        </view>

        <!-- <view class="jindu-index-num"
          ><text>￥{{ formatPrice(item.value) }}</text></view
        > -->
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
@import "count.scss";
</style>
